<template>
  <!--@node-click:节点被点击时的回调  -->
  <el-tree
    :data="menus"
    :props="defaultProps"
    node-key="catId"
    ref="menuTree"
    @node-click="nodeclick"
  >
  </el-tree>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {
      menus: [],
      expandedKey: [], //默认为null，没有什么要展开的。删除成功时要展开，不要合并上。
      defaultProps: {
        children: "children",
        label: "name", // 作为标签的值进行展示
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
        //发送成功之后的函数，{data}表示将发送成功的内容data属性解构出来
      }).then(({ data }) => {
        console.log("成功获取到data.data菜单数据-------", data.data);
        this.menus = data.data;
      });
    },
    // 传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
    nodeclick(data, node, component) {
      console.log("子组件的category的节点被点击", data, node, component);
      // 向父组件src\views\modules\product\attrgroup.vue发送事件
      this.$emit("tree-node-click", data, node, component);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
</style>